<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>Countdown Timer</title>
		<script type="text/javascript" src="tgd/Utilities/Countdown/Controller.js"></script>
		<script type="text/javascript" src="tgd/Utilities/Countdown/Serializer.js"></script>
		<script type="text/javascript" src="tgd/Utilities/Countdown/Timer.js"></script>
		<script type="text/javascript" src="tgd/Utilities/Countdown/Views/HTMLTimer.js"></script>
		<script type="text/javascript">
			//<![CDATA[

			var _controller = null;

			function init() {
				_controller = new tgd.Utilities.Countdown.Controller();
			}

			//]]>
		</script>
		<style type="text/css">
			body,html{margin:0;height:100%;width:100%;background:#000;}
			#views{margin-bottom:50px;}
			#views .timerContainer,#views .finished{border-style:solid;border-width:1px;margin:10px;}
			#views .timerContainer{color:#000;border-color:#600;}
			#views .finished{color:#fff;border-color:#008000;}
			#views .timerDigits{font-family:'OCR A Extended', Consolas, monospace;text-align:center;}
			#views .timerContainer .timerDigits{color:#f00;}
			#views .finished .timerDigits{color:#0f0;}
			#views .timerContainer .timerHeader,#views .finished .timerHeader{position:relative;}
			#views .timerContainer .timerHeader{background:#600;}
			#views .finished .timerHeader{background:#008000;}
			#views .timerTitle{margin-right:1em;}
			#views .timerEnds{font-size:.9em;}

			.timerButton{padding:0 4px;cursor:pointer;font-size:1em;margin-right:1em;text-decoration:none;font-family:Consolas,'Lucida Console', monospace;border-right-style:solid;border-right-width:1px;}
			.timerButton{background:#f00;color:#000;border-right-color:#333;}
			#views .finished .timerButton{background:#0f0;color:#006400;border-right-color:#006400;}

			#menu {position:fixed;left:0;right:0;bottom:0;color:#fff;background:#600;padding:1em;font-size:.7em;border-top:solid 1px #333;}
			#menu .item{margin-right:1em;}
			#menu input{font-size:1em;border:none;padding:0;margin:0;z-index:2525;}

			@media screen {#views .timerDigits{font-size:8em;}}
			@media handheld {#views .timerDigits{font-size:1em;} /* UPDATE MENU STYLES FOR MOBILE */}
		</style>
	</head>
	<body onload="init();">
		<div id="views">
		</div>
		<div id="menu">
			<span class="item">
				Title:&nbsp;
				<input type="text" id="txtTitle" size="15" title="[a-z,A-Z,0-9]" />
			</span>
			<span class="item">
				Date or Time:&nbsp;
				<input type="text" id="txtEndDateTime" onkeyup="if (event.keyCode == 13) { _controller.addTimer(); }" size="10" maxlength="10" title="[0-24]:[0-59] | [1-12]/[1-31]/[0-9]{4}" />
			</span>
			<span class="item">
				<a class="timerButton" href="javascript:_controller.addTimer();">Add</a>
			</span>
			<span class="item">
				<a class="timerButton" href="javascript:_controller.serialize();">Serialize</a>
			</span>
		</div>
	</body>
</html>